<template>
    <TechPanel class="servet-detail-goods-list" title="退货商品" :titleBorder="false" :isBold="true" :mode="mode">
        <template v-for="(item, index) in list">
            <div :key="index">
                <div :class="`goods-item ${mode}`">
                    <div class="goods-image">
                        <img class="image-value" :src="imageSrc(item.pic)" alt="">
                    </div>
                    <div class="goods-info">
                        <div class="name-and-sku">
                            <div class="name title-color">{{item.prod_name}}</div>
                            <div class="sku">{{item.sku_name}}</div>
                        </div>
                        <div class="price-and-count">
                            <div class="price title-color">
                                <span class="prefix tip-color">实付</span>
                                <span class="label">￥</span>
                                {{item.trans / 100}}
                            </div>
                            <div class="count">x{{item.quantity}}</div>
                        </div>
                    </div>
                </div>
                <div class="reason-tip" v-if="item.reason">
                    <div class="reason-title">退货原因</div>
                    <div class="reason-content">{{item.reason}}</div>
                </div>
            </div>
        </template>
        <div :class="`reason-tip ${mode}`" v-if="reason">
            <div class="reason-title title-color">退货原因</div>
            <div class="reason-content">{{reason}}</div>
        </div>
    </TechPanel>
</template>

<script>
import { TechPanel } from '@components/base';
import ServerGoodsInfo from './ServerGoodsInfo';
import { createShopImageSrc } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'DetailGoodsList', // 退货商品
    mixins: [ModeMixin],
    components: {
        TechPanel,
        ServerGoodsInfo,
    },
    props: {
        list: {
            type: Array,
            default: () => [],
        },
        reason: String,
    },
    computed: {
        imageSrc() {
            return pic => createShopImageSrc(pic);
        },
    },
};
</script>

<style lang="less">
.servet-detail-goods-list {
    .goods-item {
        .mode-white();
        .flex();
        .p-v(@gap);
        &.black {
            .goods-image {
                border-color: rgba(125, 125, 131, 0.2);
            }
        }
        .goods-image {
            width: 70px;
            height: 70px;
            border-radius: @border-radius;
            border: @border;
            .image-value {
                width: 100%;
                height: 100%;
            }
        }
        .goods-info {
            flex: 1;
            .m-l(@shop-gap);
            .flex();
            justify-content: space-between;
            .name-and-sku {
                max-width: 80%;
                .name {
                    font-size: @font-size;
                    color: @text-color;
                    line-height: 19px;
                }
                .sku {
                    font-size: @shop-font-size-sm;
                    opacity: .7;
                    color: @tip-color;
                    .m-t(@gap-sm);
                }
            }
            .price-and-count {
                .flex-column();
                align-items: flex-end;
                .price {
                    .flex();
                    align-items: center;
                    font-size: @font-size-md;
                    font-weight: 500;
                    font-family: @font-family-number;
                    .label {
                        .m-r(-3);
                    }
                    .prefix {
                        font-size: @font-size-sm;
                        color: @text-color;
                        font-weight: 400;
                        width: @font-size-sm * 2;
                    }
                }
                .count {
                    font-size: @shop-font-size;
                    color: @tip-color;
                }
            }
        }
    }
    .reason-tip {
        .mode-white();
        background-color: rgba(125, 125, 131, 0.08) !important;
        .m-v(@shop-gap-sm);
        .p(@shop-bag-gap);
        border-radius: @border-radius;
        .reason-title {
            font-size: @font-size;
            color: @text-color;
        }
        .reason-content {
            font-size: @shop-font-size;
            color: @tip-color;
            .m-t(@gap-sm);
        }
    }
}
</style>
